<template>
<h1>El-开关指令</h1>
  <el-switch v-model="value1"></el-switch>
  <el-switch v-model="value2"
             style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch>
  <hr>
  是否为管理员<el-switch v-model="isAdmin"></el-switch><br>
<!--  isShow 与下方的变量进行双向绑定,控制img图片是否显示-->
  是否显示图片<el-switch v-model="isShow"></el-switch><br>
  <img src="/fcq.jpg" v-if="isShow" width="200px">
  <hr>
<!-- :active-value="1" 当数字为1 的时候标识开 当数字为0的时候标识关  -->
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>


  <!-- 如果是字符串类型的需要外面加上 ''  -->
  <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"></el-switch>
</template>


<script setup>

import {ref} from "vue";

const num = ref(1);
const numStr = ref("1");

const isShow = ref(false)
const  value1 = ref(false);
const value2 = ref(true)
const isAdmin = ref(false);



</script>

<style scoped>

</style>